<template>
  <div>
    <van-notify id="van-notify" />
    <form @submit="submitForm" report-submit='true'>
      <van-cell-group>
        <van-field name="classroom" minlength="4" maxlength="5" label="教室" required placeholder="教室号，例如1201" :border="true" :value="lendClass.classroom"></van-field>
        <van-field name="department" label="班级/组织" required placeholder="请输入全称" :value="lendClass.department" :border="true"></van-field>
        <van-field name="phonenumber" minlength="11" maxlength="11" label="联系方式" required placeholder="请输入联系方式" :value="lendClass.phonenumber" :border="true"></van-field>
        <van-field name="use" label="用途" required placeholder="请输入用途" :value="lendClass.use" :border="true"></van-field>
      </van-cell-group>
      <!--时间-->
      <view class="section">
        <picker mode="date" :value="lendClass.date" :start="date" :end="endDate" @change="DateChange">
          <view class="picker">
            <van-field disabled label="日期" :value="lendClass.date" required border="false"></van-field>
          </view>
        </picker>
      </view>
      <van-row>
        <van-col span="12">
          <view class="section">
            <picker mode="time" :value="lendClass.startTime" start="08:30" end="22:30" @change="startTimeChange">
              <view class="picker">
                <van-field disabled label="开始时间" :value="lendClass.startTime" required :border="true"></van-field>
              </view>
            </picker>
          </view>
        </van-col>
        <van-col span="12">
          <view class="section">
            <picker mode="time" :value="lendClass.endTime" start="08:30" end="22:30" @change="endTimeChange">
              <view class="picker">
                <van-field disabled label="结束时间" :value="lendClass.endTime" required :border="true"></van-field>
              </view>
            </picker>
          </view>
        </van-col>
      </van-row><br><br><br><br><br>
      <button form-type="submit">提交</button>
    </form>
  </div>
</template>

<script>
  import Notify from 'static/vant/notify/notify';
  import DateFormat from "../../utils/dateFormat";
  export default {
    name: "index",
    data() {
      return {
        id: '',
        openid: '',
        classroom: '',
        show: false,
        date:  DateFormat(new Date().toDateString()),
        endDate:  new Date(new Date().setDate(new Date().getDate()+2)),
        startTime: '',
        endTime: '',
        lendClass: {},
        datevalue: '',
        phonenumber: '',
        use: '',
        department: ''
      }
    },
    onLoad() {
      this.lendClass = this.$store.state.lendClass;
    },
    methods: {
      submitForm(e) {
        if (e.detail.value.classroom === null || e.detail.value.department === null || e.detail.value.phonenumber === null ||
            this.datevalue === null || e.detail.value.use === null || this.startTime === null || this.endTime === null) {
          Notify({ type: 'danger', message: '请完善所有信息再提交', duration:1000});
          return
        }
        if (e.detail.value.classroom.length < 4) {
          Notify({ type: 'warning', message: '教室号不合理', duration:1000});
          return;
        }
        if (e.detail.value.phonenumber.length < 11){
          Notify({ type: 'warning', message: '手机号不合理', duration:1000});
          return;
        }
        const db = wx.cloud.database({env: 'xxzx1201-gxxma'});
        db.collection('lendClass').doc(this.id).update({
          data: {
            classroom: e.detail.value.classroom,
            department: e.detail.value.department,
            phonenumber: e.detail.value.phonenumber,
            date: this.datevalue,
            use: e.detail.value.use,
            startTime: this.startTime,
            endTime: this.endTime
          },
          success: (res) => {
            Notify({ type: 'warning', message: '修改成功', duration:1000});
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              })
            }, 1000)
          },
          fail: console.error
        })
      },
      DateChange(e) {
        this.datevalue = e.detail.value
      },
      startTimeChange(e) {
        this.startTime = e.detail.value
        this.endTime = e.detail.value
      },
      endTimeChange(e) {
        this.endTime = e.detail.value
      },

    }
  }
</script>

<style scoped>

</style>
